<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Google Map V3</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
            html{
                height: 100%;
            }
            body{
                height: 100%;
                margin: 0;
                padding: 0;
            }
            #map-canvas{
                height: 100%;
                width: 80%;
            }
            #map-data{
                width: 20%;
                height: 100%;
                float: left;
            }
        </style>
        <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDxLpEHxR3f5-k54y1yFg_TBvkUKHN_0Gk"></script>
        <script type="text/javascript">
            function initialize(){
                var mapOptions = {
                    center: new google.maps.LatLng(-34.397, 150.644),
                    zoom : 8
                };
                var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
            }
            google.maps.event.addDomListener(window, 'load', initialize);
        </script>
    </head>
    <body>
        <div id="map-data"></div>
        <div id="map-canvas"></div>
    </body>
</html>